<template>
	<view class="index">
		<view style="margin-left: 10px;margin-right: 10px;">
			<uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="info" :current="current" :mode="mode"
				:dots-styles="dotsStyles" field="content">
				<swiper class="swiper-box" @change="change" :current="swiperDotIndex">
					<swiper-item v-for="(item, index) in jobList" :key="index">
						<view style="border-radius: 20px;height: 200px;" class="swiper-item"
							:class="'swiper-item' + index">
							<image :src="item.url" mode="aspectFill" style="width: 100%;border-radius: 20px;"></image>
							
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>

		<!-- 顶部栏 -->
		<view class="top">
			<view class="title">
				<view class="located_Image" @click="gotonearby()" >
					<a href="/pages/page/login.wxml">
						<image src="/static/dingwei.png"></image>
					</a>
					<text>找附近</text>
				</view>

				<view class="zhiwei_Image" @click="gototoomoney()">
					<a href="">
						<image src="/static/zhiwei.png"></image>
					</a>
					<text>找钱多</text>
				</view>

				<view @click="gotomyJob()" class="xiaoxi_Image">
					<a href="">
						<image src="/static/xiaoxi.png"></image>
					</a>
					<text>我的</text>
				</view>
				
				<view @click="gotopolicy()" class="policy">
					<a href="">
						<image src="/static/policy.png"></image>
					</a>
					<text>政策</text>
				</view>

				<view class="shoucang_Image" @click="gotoPersonalSpace()">
					<a >
						<image src="/static/shoucang.png"></image>
					</a>
					<text>动态</text>
				</view>
			</view>
		</view>
		<!-- 顶部结束 -->
		<view style="height: 50px;"></view>

		<view class="near_work">
			<text style="float:left; font-weight: 800; font-size: 20px; border-bottom: 2px solid #008c8c; ">推荐工作</text>
			<view class="icon-more">
				<view class="icon-more_text">
					<text style="float:right;"></text>
				</view>
				<view>
					<image class="icon-more_image" src="/static/gengduo.png"></image>
				</view>
			</view>
		</view>

		<view style="height: 10px; background-color: #f4f8f9;">
		</view>

		<view class="box">
			<view class="content">
					<view class="partOne" @click="gotoworkDescription()" >
						<view class="container">
							<text class="work">王者荣耀陪玩</text>
							<text class="money">300—400元/天</text>
						</view>
						<view class="body">
							<view class="body1">以前干过</view>
							<view class="body2">有些经验</view>
							<view class="body3">很熟练</view>
							<view class="body4">随叫随到</view>
						</view>
						<view class="partOne_middle">
							<view class="image">
							<image class="borderImage"  src="../../../static/zhongjianren.png"></image>
						</view>
							<view class="description">联系人 · 胡先生</view>
							<view class="description2">湖北武汉</view>
						</view>
						
					</view>

					<view style="height: 10px; background-color: #f4f8f9;">
					</view>

                     <view class="partOne" @click="gotoworkDescription()" >
                     	<view class="container">
                     		<text class="work">王者荣耀陪玩</text>
                     		<text class="money">300—400元/天</text>
                     	</view>
                     	<view class="body">
                     		<view class="body1">以前干过</view>
                     		<view class="body2">有些经验</view>
                     		<view class="body3">很熟练</view>
                     		<view class="body4">随叫随到</view>
                     	</view>
                     	<view class="partOne_middle">
                     		<view class="image">
                     		<image class="borderImage"  src="../../../static/zhongjianren.png"></image>
                     	</view>
                     		<view class="description">联系人 · 胡先生</view>
                     		<view class="description2">湖北武汉</view>
                     	</view>
                     	
                     </view>
                     
                     <view style="height: 10px; background-color: #f4f8f9;">
                     </view>
                     
                     

					
			</view>
		</view>
		
		<!-- 	<view style="margin-top: 40rpx;margin-left: 16rpx;color:red;">
		当前定位:{{position}}
	</view> -->
	
	<view style="height: 100px; background-color: #f4f8f9;">
	</view>

	</view>
</template>

<script>
	import QQMapWX from "@/lib/qqmap-wx-jssdk.js";

	export default {
		data() {

			return {
				cover: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
				avatar: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png',
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				},
				position: '',
				jobList: [{
						url: "../../../static/img/two.png"
					},
					{
						url: "../../../static/img/one.png"
					},
					{
						url: "../../../static/img/three.png"
					},
				],
				location:''

			};

		},

		async onLoad() {
			const location = await this.getLocationInfo();
			this.position = location.address
			this.location = location
		},

		onShow() {


			this.user = getApp().globalData.globeUser
			this.Login()
		

		},
		methods: {
			
			gotoworkDescription:function(){
						   
				   uni.navigateTo({
					url:'/pages/page/workDescription/workDescription',
				   })
						   
			},
			
			gotomyJob:function(){
						   
				   uni.navigateTo({
					url:'/pages/page/myJob/myJob',
				   })
						   
			},
			
			gotopolicy:function(){
						   
				   uni.navigateTo({
					url:'/pages/page/news/index',
				   })
						   
			},
			
			gotonearby:function(){
				
				
						   
				   uni.navigateTo({
					url:'/pages/page/nearby/nearby?longtitude='+this.location.longitude+'&latitude='+this.location.latitude
				   })
						   
			},
			
			gototoomoney:function(){
						   
				   uni.navigateTo({
					url:'/pages/page/toomoney/toomoney',
				   })
						   
			},
			change(e) {
							this.current = e.detail.current
						},
			
			gotoPersonalSpace:function(){
						   
				   uni.navigateTo({
					url:'/pages/page/PersonalSpace/PersonalSpace',
				   })
						   
			},
			
			
			Login(){
				wx.login({
					success:(res) => {
						
						console.log(res.code);
						uni.request({
							url:getApp().globalData.baseUrl+'/auth/login/applets',
							method:'POST',
							data:{
								code : res.code
							},
							success: (res) => {
								console.log(res)
								getApp().globalData.openid = res.data.openid;
								getApp().globalData.globeUser = res.data.user;
							}
							
						})
					
					}
				})
			},
			
			
			
			
			
			//获取位置信息
			async getLocationInfo() {
				return new Promise((resolve) => {
					//位置信息默认数据
					let location = {
						longitude: 0,
						latitude: 0,
						province: "",
						city: "",
						area: "",
						street: "",
						address: "",
					};
					uni.getLocation({
						type: "gcj02",
						success(res) {
							location.longitude = res.longitude;
							location.latitude = res.latitude;
							// 腾讯地图Api
							const qqmapsdk = new QQMapWX({
								key: '6EQBZ-SJNOW-ZYQRO-RFW76-SCXUZ-AWFA3' //这里填写自己申请的key
							});
							qqmapsdk.reverseGeocoder({
								location,
								success(response) {
									let info = response.result;
									console.log(info);
									location.province = info.address_component.province;
									location.city = info.address_component.city;
									location.area = info.address_component.district;
									location.street = info.address_component.street;
									location.address = info.address;
									resolve(location);
									
								},
							});
						},
						fail(err) {
							console.log(err)
							resolve(location);
						},
					});
				});
			}



		},
	};
</script>

<style>
	.index {
		background-color: #fbfbfd;
		width: 100%;
		height: 100%;
		overflow: hidden;
		/* deecf5 */
	}

	.son_contain {
		height: 50px;
		width: 80%;
		margin-bottom: 30px;
	}

	.first_image {
		float: right;
		height: 50px;
		width: 50px;
		margin-right: 10px;
		border-radius: 50%;

	}

	.title {
		font-size: 17px;
		font-weight: 4000;
		margin-left: 80px;
	}

	.swiper-box {
		height: 200px
	}

	.swiper-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 200px;
		color: #fff
	}
	
	

	.swiper-item0 {
		background-color: #cee1fd
	}

	.swiper-item1 {
		background-color: #b2cef7
	}

	.swiper-item2 {
		background-color: #cee1fd
	}

	.image {
		width: 750rpx
	}

	.image ._img {
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none
	}

	@media screen and (min-width:500px) {
		.uni-swiper-dot-box {
			width: 400px;
			margin: 0 auto;
			margin-top: 8px
		}

		.image {
			width: 100%
		}
	}

	.uni-bg-red {
		background-color: #ff5a5f
	}

	.uni-bg-green {
		background-color: #09bb07
	}

	.uni-bg-blue {
		background-color: #007aff
	}

	.example-body {
		display: flex;
		flex-direction: row;
		padding: 20rpx
	}

	.example-body-item {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin: 15rpx;
		padding: 15rpx;
		height: 60rpx;
		display: flex;
		padding: 0 15rpx;
		flex: 1;
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		border-radius: 5px
	}

	.example-body-item-text {
		font-size: 28rpx;
		color: #333
	}

	.example-body-dots {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50px;
		background-color: #333;
		margin-left: 10rpx
	}

	.active {
		border-style: solid;
		border-color: #007aff;
		border-width: 1px
	}

	.top {
		height: 100px;
		width: 100%;
		position: relative;
		display: block;
		top: 20px;
		margin-bottom: 20px;
	}

	.top .title {
		margin-left: 15px;
		margin-right: 15px;
	}

	.located_Image image {
		height: 45px;
		width: 45px;
		position: absolute;
		left: 20px;
		top: 2px;
	}

	.located_Image text {
		position: absolute;
		bottom: 10px;
		left: 20px;
		font-size: 15px;
	}

	.zhiwei_Image image {
		height: 45px;
		width: 45px;
		position: absolute;
		left: 100px;
		top: 2px;
	}

	.zhiwei_Image text {
		position: absolute;
		bottom: 10px;
		left: 102px;
		font-size: 15px;
	}

	.xiaoxi_Image image {
		height: 45px;
		width: 45px;
		position: absolute;
		left: 188px;
		top: 3px;
	}
	
	.xiaoxi_Image text {
		position: absolute;
		bottom: 10px;
		left: 194px;
		font-size: 15px;
	}
	
	.policy image{
		height: 45px;
		width: 45px;
		position: absolute;
		left: 270px;
		top: 3px;
	}
	
	.policy text{
		position: absolute;
		bottom: 10px;
		left: 276px;
		font-size: 15px;
	}

	

	.shoucang_Image image {
		height: 45px;
		width: 45px;
		position: absolute;
		right: 20px;
		top: 3px;
	}

	.shoucang_Image text {
		position: absolute;
		bottom: 10px;
		right: 28px;
		font-size: 15px;
	}

	.communication {
		margin-top: 20px;
		margin-left: 10px;
		margin-bottom: 10px;
		text-align: center;
	}

	.work_recommend {
		margin-left: 10px;
		margin-bottom: 10px;
		margin-top: 10px;
		text-align: center;
	}

	.portion_One {
		margin-right: 10px;
		margin-left: 10px;
		margin-bottom: 20px;
		height: 150px;
	}

	.near_work {
		margin-bottom: 40px;
		height: 10px;
		margin-left: 10px;
		margin-right: 10px;
	}

	.icon-more {
		position: relative;
	}

	.icon-more_text {
		position: absolute;
	}

	.department {
		margin-left: 30px;
	}

	.icon-more_image {
		width: 30px;
		height: 30px;
		position: absolute;
		right: 0px;
		top: -5px;
	}

	.box {
		background-color: #f4f8f9;
		width: 100%;
	}

	.content {
		background-color: #ffffff;
		margin-left: 10px;
		margin-right: 10px;
		border-radius: 8px;
		box-shadow: 0px 0px 5px #ccc; 
	}

	.content .partOne {
		height: 180px;
	}

	.middle {
		height: 40px;
		width: 100%;
		position: relative;
		margin-bottom: 10px;
		background-color: #fbfbfd;
	}

	.middle .recommend {
		position: absolute;
		left: 20px;
		font-weight: 300;
		top: 10px;
	}

	.middle .play {
		position: absolute;
		left: 100px;
		font-weight: 300;
		top: 10px;
	}

	.middle .click {
		top: 8px;
		position: absolute;
		left: 100px;
		font-weight: 800;
		font-size: 20px;
		border-bottom: 2px solid #008c8c;
	}

	.content .partOne {
		height: 200px;
		position: relative;
		width: 100%;
		margin-bottom: 10px;
	}

	.content .partOne .container {
		position: absolute;
		height: 20px;
		left: 10px;
		top: 10px;
		right: 10px;
		width: 100%;
	}

	.content .partOne .work {
		position: absolute;
		font-weight: bold;
		left: 0px;
		color: #212121;
	}

	.content .partOne .money {
		position: absolute;
		font-weight: bold;
		right: 20px;
		color: #839cef;
	}

	.content .partOne .body {
		position: absolute;
		height: 20px;
		width: 80%;
		top: 40px;
	}

	.content .partOne .body .body1 {
		position: absolute;
		left: 10px;
		background-color: #f4f6f8;
		font-size: 15px;
		font-weight: 330;
	}

	.content .partOne .body .body2 {
		position: absolute;
		left: 80px;
		background-color: #f4f6f8;
		font-size: 15px;
		font-weight: 330;
	}

	.content .partOne .body .body3 {
		position: absolute;
		left: 150px;
		background-color: #f4f6f8;
		font-size: 15px;
		font-weight: 330;
	}

	.content .partOne .body .body4 {
		position: absolute;
		left: 220px;
		background-color: #f4f6f8;
		font-size: 15px;
		font-weight: 330;
	}

	.partOne_middle {
		height: 80px;
	}

	.partOne_middle .image {
		position: absolute;
		top: 70px;
		left: 0px;
	}

	.partOne_middle .description {
		position: absolute;
		top: 150px;
		left: 50px;
	}

	.partOne_middle .description2 {
		position: absolute;
		top: 150px;
		right: 20px;
	}

	.borderImage{
		border-radius: 50%; 
		height: 35px; 
		width: 35px;
		position: absolute;
		left: 4px;
		top: 74px;
	}
	
</style>
